<template>
  <div>
    <el-form
      ref="tempDataForm"
      v-loading="drawerLoading"
      :rules="rules[drawerOptions[drawerStatus].value]"
      :model="tempData"
      label-width="auto"
      label-suffix=": "
      style="margin: 15px;"
    >
      <el-form-item v-if="treeTable" label="上级" prop="parentId">
        <el-select v-model="tempData.parentId" class="form-item">
          <el-option v-for="(item, index) in parentOptions" :key="index" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <div v-for="(column, index) in columns" :key="index">
        <el-form-item
          v-if="column.edit"
          :label="column.label"
          :prop="column.key"
        >
          <!--     图片     -->
          <template v-if="column.type === 'IMAGE'">
            <upload-image
              :ref="url + '_UploadImage_' + column.key"
              :suffix="column.imageSuffix"
              class="form-item"
              :file-url="tempData[column.key]"
              :column-name="column.key"
              @columnValChange="columnValChange"
            />
          </template>
          <!--     视频     -->
          <template v-else-if="column.type === 'VIDEO'">
            <upload-video
              :ref="url + '_UploadVideo_' + column.key"
              :suffix="column.imageSuffix"
              class="form-item"
              :file-url="tempData[column.key]"
              :column-name="column.key"
              @columnValChange="columnValChange"
            />
          </template>
          <!--     开关     -->
          <template v-else-if="column.type === 'ENABLE'">
            <el-switch
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              active-color="#13ce66"
              inactive-color="#ff0000"
              active-text="启用"
              inactive-text="禁用"
            />
          </template>
          <!--     是否     -->
          <template v-else-if="column.type === 'BOOLEAN'">
            <el-switch
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              active-color="#13ce66"
              inactive-color="#ff0000"
              active-text="是"
              inactive-text="否"
            />
          </template>
          <!--     数字     -->
          <template v-else-if="column.type === 'NUMBER' || column.type === 'SINGLE_NUMBER'">
            <el-input-number
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              class="form-item"
            />
          </template>
          <!--     多选     -->
          <template v-else-if="column.type === 'MULTI_SELECT'">
            <el-select
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              class="form-item"
              value-key="id"
              multiple
              clearable
            >
              <el-option
                v-for="(item, index_) in options[column.optionKey]"
                :key="index_"
                :label="item[column.optionKeyLabel || 'name']"
                :value="item"
              />
            </el-select>
          </template>
          <!--     关联单选     -->
          <template v-else-if="column.type === 'REL_SELECT'">
            <el-select
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              class="form-item"
              value-key="id"
              clearable
            >
              <el-option
                v-for="(item, index_) in options[column.optionKey]"
                :key="index_"
                :label="item[column.optionKeyLabel || 'name']"
                :value="item"
              />
            </el-select>
          </template>
          <!--    单选      -->
          <template v-else-if="column.type === 'DICTIONARY'">
            <el-select
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              class="form-item"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index_) in options[column.optionKey]"
                :key="index_"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
          <!--     树形多选       -->
          <template v-else-if="column.type === 'TREE_MULTI_SELECT'">
            <tree-multi-select
              :ref="url + '_TreeForm_' + column.key"
              :disabled="column.notUpdate && tempData.updateTime"
              :column-name="column.key"
              :tree-data="options[column.optionKey]"
              :show-checkbox="drawerStatus > 1"
              :default-checked-keys="(tempData[column.key]||[]).map(e => e.id)"
              @columnValChange="columnValChange"
            />
          </template>
          <!--     远程选择       -->
          <template v-else-if="column.type === 'REMOTE_SELECT'">
            <remote-select
              class="form-item"
              :ref="url + '_RemoteForm_' + column.key"
              :size="column.remote.size"
              :disabled="column.notUpdate && tempData.updateTime"
              :column-name="column.key"
              :url="column.remote.url"
              :label="column.remote.label"
              :multiple="column.remote.multiple"
              :value="tempData[column.key]"
              @columnValChange="columnValChange"
            />
          </template>
          <!--     远程选择       -->
          <template v-else-if="column.type && column.type === 'REMOTE_SELECT_BOOK'">
            <remote-select-book
              :key="column.key"
              :ref="url + '_RemoteBookForm_' + column.key"
              class="form-item"
              :size="column.remote.size"
              :disabled="column.notUpdate && tempData.updateTime"
              :column-name="column.key"
              :label="column.remote.label"
              :multiple="column.remote.multiple"
              :value="tempData[column.key]"
              @columnValChange="columnValChange"
            />
          </template>
          <!--          富文本-->
          <template v-else-if="column.type === 'HTML' || column.type === 'LONG_TEXT'">
            <tinymce
              :ref="url + '_Html_' + column.key"
              :value="tempData[column.key]"
              :column-name="column.key"
              @columnValChange="columnValChange"
            />
          </template>
          <!--          LONG_WORD-->
          <template v-else-if="column.type === 'LONG_WORD'">
            <el-input
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              type="textarea"
              :rows="column.rows || 10"
              :placeholder="'请输入' + column.label"
            />
          </template>
          <!--     树形单选       -->
          <template v-else-if="column.type === 'TREE_SELECT'">
            <tree-single-select
              :options="options[column.optionKey]"
              :disabled="column.notUpdate && tempData.updateTime"
              :check-node="tempData[column.key]"
              :column-name="column.key"
              @columnValChange="columnValChange"
            />
          </template>
          <!--            时间日期-->
          <template v-else-if="column.type === 'DATE_TIME'">
            <el-date-picker
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              clearable
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              class="form-item"
            />
          </template>
          <!--            时间日期-->
          <template v-else-if="column.type === 'DATE'">
            <el-date-picker
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              clearable
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              class="form-item"
            />
          </template>
          <!--            时间日期-->
          <template v-else-if="column.type === 'TIME'">
            <el-time-picker
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              clearable
              format="HH:mm:ss"
              value-format="HH:mm:ss"
              type="time"
              class="form-item"
            />
          </template>
          <!--          标签-->
          <template v-else-if="column.type === 'TAGS'">
            <el-tag
              v-for="(tag, index_) in tempData[column.key]"
              :key="index_"
              closable
              :disable-transitions="false"
              @close="handleClose(column.key, tag, index_)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible[column.key]"
              :ref="'saveTagInput_' + column.key"
              v-model="inputValue"
              :disabled="column.notUpdate && tempData.updateTime"
              class="form-item"
              @keyup.enter.native="handleInputConfirm(column.key)"
            />
            <el-button v-else class="button-new-tag" @click="showInput(column.key)">+ 添加</el-button>
          </template>
          <!--          Object-->
          <template v-else-if="column.type === 'OBJECT'">
            <vue-json-editor
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              :mode="'code'"
              lang="zh"
            />
          </template>
          <!--          Array-->
          <template v-else-if="column.type === 'ARRAY'">
            <div v-for="(arrayItem, arrayIndex) in tempData[column.key]" :key="arrayIndex">
              <vue-json-editor
                :ref="'vueJsonEdit_' + column.key"
                :value="arrayItem"
                :mode="'code'"
                lang="zh"
              />
            </div>
          </template>
          <!--    普通文本      -->
          <template v-else>
            <el-input
              v-model="tempData[column.key]"
              :disabled="column.notUpdate && tempData.updateTime"
              clearable
              :autofocus="column.autofocus"/>
          </template>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button
          v-if="drawerStatus === 3"
          v-waves
          type="primary"
          :loading="addOrEditLoading"
          @click="handleSave()"
        >保存
        </el-button>
        <el-button
          v-if="drawerStatus === 2"
          v-waves
          type="primary"
          :loading="addOrEditLoading"
          @click="handleUpdate()"
        >提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import permission from '@/directive/permission'
import waves from '@/directive/waves'
import UploadImage from '@/components/UploadImage'
import UploadVideo from '@/components/UploadVideo'
import Tinymce from '@/components/Tinymce'
import TreeMultiSelect from '@/components/TreeMultiSelect'
import TreeSingleSelect from '@/components/TreeSingleSelect'
import RemoteSelect from '@/components/RemoteSelect'
import RemoteSelectBook from '@/components/RemoteSelectBook/index.vue'; // waves directive
import VueJsonEditor from 'vue-json-editor'
import {deepClone} from '@/utils'
import {addBase, editBase} from '@/api/common'

export default {
  name: 'ListRowEdit',
  components: {
    RemoteSelect,
    RemoteSelectBook,
    UploadImage,
    UploadVideo,
    Tinymce,
    TreeMultiSelect,
    TreeSingleSelect,
    VueJsonEditor,
  },
  directives: {permission, waves},
  props: {
    idColumn: {type: String, default: 'id'},
    temp: {
      type: Object, default: () => {
      }
    },
    tempIndex: {type: Number, default: 0},
    url: {type: String, default: ''},
    permission: {type: String, default: ''},
    columns: {type: Array, default: () => []},
    parentOptions: {type: Array, default: () => []},
    drawerStatus: {type: Number, default: 3},
    treeTable: {type: Boolean, default: false},
    rules: {
      type: Object, default: () => {
      }
    },
    transformFun: {
      type: Function, default: null
    },
    options: {
      type: Object, default: () => {
      }
    },

  },
  data() {
    return {
      drawerLoading: false,
      inputVisible: {},
      inputValue: '',
      addOrEditLoading: false,
      tempData: {},
      drawerOptions: [
        {value: '', title: ''},
        {value: 'detail', title: '详情'},
        {value: 'edit', title: '编辑'},
        {value: 'add', title: '新建'}
      ]
    }
  },
  created() {
    this.tempData = deepClone(this.temp)
    this.$nextTick(() => {
      this.$refs.tempDataForm.clearValidate()
    })
  },
  methods: {
    handleClose(key, tag, index) {
      this.tempData[key].splice(index, 1)
    },
    showInput(key) {
      this.$set(this.inputVisible, key, true)
    },
    handleInputConfirm(key) {
      if (this.inputValue) {
        if (!this.tempData[key]) {
          this.$set(this.tempData, key, [undefined])
        }
        this.tempData[key].push(this.inputValue)
      }
      this.$set(this.inputVisible, key, false)
      this.inputValue = ''
    },
    handleSave() {
      this.addOrEditLoading = true
      this.$refs.tempDataForm.validate((valid) => {
        if (valid) {
          if (this.transformFun) {
            this.tempData = this.transformFun(this.tempData)
          }
          addBase(this.url, this.tempData).then(res => {
            this.$emit('handleGetParentOptions')
            this.$emit('saveSuccess', this.tempIndex, res.data)
            this.$notify.success('创建成功!')
            this.addOrEditLoading = false
          }).catch(() => {
            this.addOrEditLoading = false
          })
        } else {
          this.addOrEditLoading = false
        }
      })
    },
    handleUpdate() {
      this.addOrEditLoading = true
      this.$refs.tempDataForm.validate((valid) => {
        if (valid) {
          if (this.transformFun) {
            this.tempData = this.transformFun(this.tempData)
          }
          editBase(this.url, this.tempData).then(res => {
            this.$emit('handleGetParentOptions')
            this.$emit('saveSuccess', this.tempIndex, res.data)
            this.$notify.success('修改成功!')
            this.addOrEditLoading = false
          }).catch(() => {
            this.addOrEditLoading = false
          })
        } else {
          this.addOrEditLoading = false
        }
      })
    },
    columnValChange(val, index, column) {
      this.$set(this.tempData, column, val)
    },
  }
}
</script>

<style scoped>

</style>
